import { FC } from 'react'

// import WordHScroll from "../../../../Components/WordHScroll"
import { getDuration } from '../../../../utils'
import { SecurityGovernanceRankingResponse } from '../../data'
import WordHScroll from '../WordHScroll'

import './index.less'

export type SecurityGovernanceTableProps = {
  headers: { title: string; width: number | string }[]
  dataSourse: SecurityGovernanceRankingResponse[]
}

const SecurityGovernanceTable: FC<SecurityGovernanceTableProps> = ({
  dataSourse = [],
  headers = []
}) => {
  return (
    <div className="security-governance-table">
      <table>
        <thead>
          <tr>
            {headers.map((header, index) => {
              return (
                <th key={index} style={{ width: header.width }}>
                  {header.title}
                </th>
              )
            })}
          </tr>
        </thead>
        {dataSourse.length > 0 && (
          <tbody>
            {dataSourse.map((item, index) => {
              return (
                <tr key={index}>
                  <td>
                    <div style={{ display: 'flex', alignItems: 'center' }}>
                      <div
                        style={{
                          width: 164,
                          whiteSpace: 'nowrap',
                          overflow: 'hidden',
                          boxSizing: 'border-box'
                        }}
                      >
                        {/* NOTE: 注意
                          这个 WordHScroll组件的引入路径，因为如果之前外面Components下的 WordHScroll，轮播滚动时，文本滚动不会生效
                          暂时还不清楚什么原因导致的，先这么处理
                        */}
                        <WordHScroll>
                          <div>
                            <span>{item.objNme ?? ''}</span>
                            <span style={{ color: '#F55650', marginLeft: 4 }}>
                              {item.violationItemName ?? ''}
                            </span>
                          </div>
                        </WordHScroll>
                      </div>
                    </div>
                  </td>
                  <td>
                    <div style={{ width: 59 }}>{item.orderType}</div>
                  </td>
                  <td>
                    <div
                      style={{
                        width: 83,
                        whiteSpace: 'nowrap',
                        overflow: 'hidden'
                      }}
                    >
                      {/* NOTE: 注意
                          这个 WordHScroll组件的引入路径，因为如果之前外面Components下的 WordHScroll，轮播滚动时，文本滚动不会生效
                          暂时还不清楚什么原因导致的，先这么处理
                        */}
                      <WordHScroll>
                        <span>{item.handleMethod}</span>
                      </WordHScroll>
                    </div>
                  </td>
                  <td>
                    <div style={{ width: 80 }}>
                      {getDuration(item.handleDateTime)}
                    </div>
                  </td>
                </tr>
              )
            })}
          </tbody>
        )}
      </table>
      {dataSourse.length === 0 && (
        <div
          style={{
            height: 274,
            width: 412,
            color: 'rgba(255, 255, 255, 0.32)',
            fontSize: 12,
            textAlign: 'center',
            lineHeight: '274px'
          }}
        >
          暂无数据
        </div>
      )}
    </div>
  )
}

export default SecurityGovernanceTable
